import React, { useEffect, useRef, useState } from 'react'
import './chart.less'
import { Chart } from '@antv/g2'

const Charts = () => {
	const chartRef = useRef()
	const data = [
		{ month: '1', value: 1078 },
		{ month: '2', value: 1216 },
		{ month: '3', value: 758 },
		{ month: '4', value: 623 },
		{ month: '5', value: 319 },
		{ month: '6', value: 422 },
		{ month: '7', value: 323 },
		{ month: '8', value: 423 },
		{ month: '9', value: 625 },
		{ month: '10', value: 964 },
		{ month: '11', value: 1231 },
		{ month: '12', value: 597 },
	]

	const [chart, setChart] = useState(null)

	useEffect(() => {
		const chart = new Chart({
			container: 'c11',
			width: 500,
			height: 200,
		})
		setChart(chart)
	}, [])

	useEffect(() => {
		chart && renderChart()
	}, [chart])

	const renderChart = () => {
		chart.clear()
		chart.data(data)

		chart.axis('month', {
			title: {
				text: '阿哈哈哈',
				position: 'top',
				style: {
					x: 150,
					y: 24,
				},
			},
		})

		chart.scale('value', {
			range: [0, 1],
			tickCount: 1,
			min: 0,
			formatter: () => '',
		})
		chart.scale('month', {
			range: [0, 1],
			nice: true,
			tickLine: null,
			formatter: () => '',
		})

		chart.tooltip({
			showCrosshairs: true,
		})

		chart.line().shape('smooth').position('month*value')
		chart.area().shape('smooth').position('month*value')

		chart.render()
	}

	return (
		<div classmonth={'chart11'}>
			<div>
				新增项目
				<span>120</span>
			</div>
			<div id="c11" ref={chartRef} />
		</div>
	)
}

export default Charts
